<template>
  <div class="wrapper">
    <div class="content">
      <slot></slot>

       <div class="pullup-wrapper">
          <div v-if="isPullUpLoad" class="before-trigger">
            <span class="pullup-txt">正在加载....</span>
          </div>
          <div v-else class="after-trigger">
            <span class="pullup-txt">没有更多数据了</span>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
import BSscroll from 'better-scroll'
import { debounce } from '@/utils/debounce'
export default {
  props: {
    probeType: {
      type: Number,
      default: 0
    },
    pullUpLoad: {
      type: Boolean
    }
  },
  data () {
    return {
      bscroll: null,
      isPullUpLoad: false
    }
  },
  created () {

  },
  mounted () {
    this.bscroll = new BSscroll('.wrapper', {
      click: true,
      probeType: this.probeType,
      pullUpLoad: this.pullUpLoad
    })
    // backTop 触发的函数
    // this.bscroll.on('scrollEnd', position => {
    //   // console.log(position)
    //   this.$emit('getPosition', position.y)
    // })
    this.refresh()
    this.bscroll.on('scroll', position => {
      // console.log(position.y)
      this.$emit('getPosition', position.y)
    })

    // 监听上拉加载事件
    this.bscroll.on('pullingUp', this.loadMore)
    // 分发图片加载完成事件
    // 对this.bscroll.refresh() 进行防抖处理
    this.$Bus.$on('itemImgLoad', debounce(this.refresh, 50))
  },
  methods: {
    goTop (x, y, time = 500) {
      this.bscroll.scrollTo(x, y, time)
    },
    // 对没有设置高度的异步图片 监听load事件之后触发refresh函数
    refresh () {
      this.bscroll.refresh()
    },
    loadMore () {
      this.isPullUpLoad = true
      this.$emit('loadMore')

      // this.isPullUpLoad = false
    },
    finishPullUp () {
      this.bscroll.finishPullUp()
    }
  }
}
</script>
<style scoped>
/* @import ''; 引入css类 */
.wrapper {
  position: absolute;
  top: 44px;
  bottom: 49px;
  left: 0;
  right: 0;
}
.pullup-wrapper {
  padding: 20px;
  text-align: center;
  color: #999;
}
</style>
